<template>
  <div v-show="visible"
       :style="{ backgroundColor: background || '' }"
       :class="[customClass]"
       class="empty-mask">
    <div class="empty-content">
      <img v-if="iconUrl" :src="iconUrl" class="empty-icon">
      <p v-if="showText" class="empty-text">{{ showText }}</p>
    </div>
  </div>
</template>

<script setup>
import {toRefs, reactive, computed} from 'vue'

defineOptions({
  name: "EmptyComponent"
})

const optionData = reactive({
  text: null,
  background: null,
  visible: true,
  icon: null,
  customClass: ''
})
const {
  text,
  background,
  visible,
  icon,
  customClass
} = toRefs(optionData)

const showText = computed(() => {
  /** 内置几个类型  当时none的时候  不展示 */
  if (optionData.text) {
    return optionData.text
  } else {
    return '没有找到数据'
  }
})


const iconUrl = computed(() => {
  /** 内置几个类型  当时none的时候  不展示 */
  // console.log("optionData", optionData)
  if (optionData.icon) {
    if (optionData.icon === 'none') {
      return ''
    } else if (optionData.icon === 'nopermission') {
      return '/src/assets/img/nopermission.png'
    } else {
      return ('/src/assets/img/empty.png')
    }
  } else {
    return ('/src/assets/img/empty.png')
  }
})

const setText = (text) => {
  if (text) {
    optionData.text = text
  }
}

const setIcon = (icon) => {
  optionData.icon = icon
}

defineExpose({
  setText, setIcon,optionData
})

</script>

<style lang="scss" scoped>
.empty-mask {
  position: absolute;
  z-index: 5;
  background-color: rgba(255, 255, 255, 0.98);
  margin: 0;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.empty-content {
  top: 50%;
  width: 100%;
  text-align: center;
  position: absolute;
}

.empty-text {
  margin: 3px 0;
  color: #aaa;
  font-size: 13px;
}

.empty-icon {
  display: block;
  width: 150px;
  margin: 0 auto 20px auto;
}
</style>

